<template>
    <el-dialog :title="dialogStatus | titleFilter" :close-on-click-modal="false" width="600px" :visible.sync="visible">
        <el-form ref="temp" :model="temp" :rules="rule" label-width="120px" @keyup.enter.native="dataFormSubmit()">

            <el-form-item label="园区名称" prop="name">
                <el-input v-model="temp.name" placeholder="角色名称" />
            </el-form-item>

            <el-form-item label="占地总面积" prop="sumArea">
                <el-input v-model="temp.sumArea" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="建筑面积" prop="buildingArea">
                <el-input v-model="temp.buildingArea" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="绿化面积" prop="greenArea">
                <el-input v-model="temp.greenArea" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="园区位置" prop="province_city_county">
                <el-cascader style="width:100%" :options="options" v-model="temp.province_city_county" @change="select_province_city_county"
                    placeholder="请选择">
                </el-cascader>
            </el-form-item>

            <el-form-item label="详细地址" prop="address">
                <el-input v-model="temp.address" placeholder="请输入" />
            </el-form-item>

            <!-- <el-form-item label="备注" prop="remark">
                <el-input v-model="temp.remark" placeholder="备注" />
            </el-form-item> -->

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">
                取消
            </el-button>
            <el-button type="primary" @click="dataFormSubmit">
                确认
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import { createPark, getParkDetails, updatePark } from '@/api/assets'// 请求数据
import { regionData, CodeToText } from "element-china-area-data" //地理数据插件
export default {
    filters: {
        // 过滤弹框的标题
        titleFilter (type) {
            const textMap = {
                create: '新增',
                update: '修改'
            }
            return textMap[type]
        }
    },
    data () {
        return {
            visible: false,
            dialogStatus: '', // 弹框新增或者修改
            options: regionData, //地理数据
            temp: { // 表单数据
                id: '',
                name: '',//园区名称
                sumArea: '',//总占地面积
                buildingArea: '',//建筑面积
                greenArea: '',//绿化面积
                address: '',//地址 
                province: '',//省
                city: '',//市
                county: '',//区
                province_city_county: [],//省市区编号
                // remark: ''
            },
            rule: {
                name: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                province_city_county: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
            }
        }
    },
    created () {
    },
    methods: {
        // 初始化
        init (status, param) {
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this[status](param) // 新增或者修改
            this.$nextTick(() => { // 重置表单
                this.$refs['temp'].clearValidate()
            })
        },
        create () {
            this.resetTemp() // 清空表单
        },
        async update (param) {
            console.log(param)
            // let data = Object.assign({}, param)  .//从上一页带过来当前的数据
            const { data, code } = await getParkDetails({}, param.id) // 从后台获取当前的的数据
            // 成功
            this.temp.id = data.id
            this.temp.name = data.name
            this.temp.sumArea = data.sumArea
            this.temp.buildingArea = data.buildingArea
            this.temp.greenArea = data.greenArea
            this.temp.address = data.address
            this.temp.province = data.province
            this.temp.city = data.city
            this.temp.county = data.county
            this.temp.province_city_county = data.addressCode.split('/')

        },
        // 新增数据清空表单数据
        resetTemp () {
            this.temp = {
                id: '',
                name: '',//园区名称
                sumArea: '',//总占地面积
                buildingArea: '',//建筑面积
                greenArea: '',//绿化面积
                address: '',//地址
                name: '',//园区名称
                province: '',//省
                city: '',//市
                county: '',//区
                province_city_county: [],//省市区 拼接
                address_code: []//省市区 编号
            }
        },
        // 表单提交
        dataFormSubmit () {
            this.$refs['temp'].validate(async (valid) => {
                if (!valid) return
                const params = {
                    'id': this.temp.id || undefined,
                    'name': this.temp.name,
                    'sumArea': this.temp.sumArea,
                    'buildingArea': this.temp.buildingArea,
                    'greenArea': this.temp.greenArea,
                    'address': this.temp.address,
                    'province': this.temp.province,
                    'city': this.temp.city,
                    'county': this.temp.county,
                    'addressCode': this.temp.province_city_county.join('/')
                }
                const textMap = {
                    create: createPark, // 新增
                    update: updatePark // 修改
                }

                // 提交表单
                const { code, message } = await textMap[this.dialogStatus](params)

                // 成功
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('getList')
                    }
                })
            })
        },

        // ===>>>>>>>>>

        //选择省市区
        select_province_city_county () {
            this.temp.province = CodeToText[this.temp.province_city_county[0]]
            this.temp.city = CodeToText[this.temp.province_city_county[1]]
            this.temp.county = CodeToText[this.temp.province_city_county[2]]
            console.log(this.temp)
        },



    }
}
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        width: 458px;
        overflow: hidden;
    }
    &__icon-inner {
        width: 478px;
        max-height: 258px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    &__icon-list {
        width: 458px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}
</style>
